<template>
    <div class="table-modal">
        <div class="mask"></div>
        <div class="table-box">
            <h1>新建/编辑用户</h1>
            <el-row>
                <el-col :span="12">
                
                <div class="input-name">
                    <p>姓名</p>
                    <el-input v-model="userName" placeholder="请输入内容" />
                </div>
            </el-col>
                <el-col :span="12">
                    <div class="select-sex">
                        <p>性别</p>
                        <el-select v-model="value" placeholder="请选择" class="select">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </el-col>
            </el-row>
            
            <el-row> 
                <el-col :span="24">
                    <div class="input-phone">
                        <p>联系电话</p>
                        <el-input v-model="userPhone" placeholder="请输入内容" />
                    </div>
                </el-col>
            </el-row>
            <div class="area">详细地址</div>
            <el-row>
                <el-col :span="8">
                    <div class="input-locat">
                        <el-cascader class="cascader"
                        v-model="selectValue"
                        :options="selects"
                        ></el-cascader>
                    </div>
                </el-col>
                <el-col :span="16">
                    <div class="input-locat locat">
                        <el-input v-model="locat" placeholder="请输入详细地址" />
                    </div>
                </el-col>
            </el-row>

            <div class="button">
                <el-row>
                    <el-button type="info" @click="chanIsShowTableModal(false)">取消</el-button>
                    <el-button type="primary">保存</el-button>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
import { mapMutations} from 'vuex'
export default {
    methods:{
        ...mapMutations({
            chanIsShowTableModal:'ShowTableModal/chanIsShowTableModal'
        })
    },
    data () {
        return {
            userName: '',
            options: [{
                value: '选项1',
                label: '男'
            }, {
                value: '选项2',
                label: '女'
            }],
            value: '',
            userPhone:'',
            selects: [{
                value: "guangdongsheng",
                label:'广东省',
                children:[{
                    value:"guangzhoushi",
                    label:'广州市',
                    children:[{
                        value:'panyuqu',
                        label:"番禺区"
                    },{
                        value:'tianhequ',
                        label:"天河区"
                    }]
                }]
            }],
            selectValue:[],
            locat:''
        }
    }
}
</script>
 
<style lang = "less" scoped>
    .table-modal{
        width: 100%;
        height: 100%;
        position: fixed;
        left: 0;
        top:80px;
        
        .mask{/* 阻止事件冒泡*/
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
        }
        
        .table-box{
            width: 800px;
            height: 500px;
            background-color: #fff;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            
            h1{
                font-size: 25px;
                font-weight: 700;
                letter-spacing:5px;
                margin: 20px;
                text-align: center;
            }
            
            p{
                margin-bottom: 5px;
                margin-left: 5px;
            }
            .area {
                margin-left: 13px;
                margin-top: 5px;
            }
            .input-name,.input-phone,.select-sex,.input-locat{
                width: 350px;
                margin:10px;
                /* margin-left: 50px; */

            }
            .input-locat{
                width: 480px;
                .cascader{
                    width:350px;
                }
                .locat{
                    width:500px;
                    position: relative;
                    left: 50px;
                }
            }
            
            .select-sex{
                .select{
                    width:350px;
                }
            }
            .button{
                position: relative;
                left: 600px;
                top:30px
            }
        }
    }
</style>
